<template>
  <Back />
  <div class="body">
    <div>{{ $t('agent.welcome') }}</div>

    <div class="font-size-1.8rem color-#3AA1A2 m-y-8px">{{ $t('agent.title') }}</div>

    <div class="bg flex justify-between items-center">
      <img class="app" src="../../assets/images/app1.png" />
      <img class="app" src="../../assets/images/app2.png" />
      <img class="app" src="../../assets/images/app3.png" />
      <img class="app" src="../../assets/images/app4.png" />
      <div>MORE</div>
    </div>

    <div class="flex justify-between m-t-16px">
      <div class="font-size-1.2rem color-#9c9c9c">{{ $t('agent.number') }}</div>
      <div class="font-size-1.6rem font-bold">{{ user?.agentNumber }}</div>
    </div>

    <div class="m-t-16px bg flex justify-between items-center" @click="go('/agentPickUps')">
      <div>{{ $t('agent.choose') }}</div>
      <div class="flex items-center">
        <div>{{ user && user.pickUpName ? user.pickUpName : 'choose' }}</div>
        <van-icon name="arrow" color="#3AA1A2" />
      </div>
    </div>

    <div class="bg m-t-16px">
      <div class="flex">
        <div class="flag">1</div>
        <div>{{ $t('agent.type1') }}</div>
      </div>
      <div style="text-align: center">
        <van-button type="primary" size="mini" @click="trySelf"> {{ $t('agent.self') }} </van-button>
      </div>
    </div>
    <div class="bg m-t-16px flex">
      <div class="flag">2</div>
      <div>{{ $t('agent.type2') }}</div>
    </div>
    <div class="bg m-t-16px flex">
      <div class="flag">3</div>
      <div>{{ $t('agent.type3') }}</div>
    </div>

    <div class="m-t-20px">
      <div class="text-center m-t-4px font-size-1.4rem">{{ $t('agent.freight1') }}</div>
      <div class="text-center font-size-1.4rem">{{ $t('agent.freight2') }}</div>
      <div class="text-center m-y-4px font-size-1.4rem">{{ $t('agent.offical') }}TEAWOO_UZ_SUPPTOR</div>
      <div class="flex m-t-8px">
        <van-button block type="primary" round @click="cs"> {{ $t('agent.cs') }} </van-button>
        <div class="w-16px"></div>
        <van-button block type="primary" round @click="go('/agentOrders')"> {{ $t('agent.orders') }} </van-button>
      </div>
    </div>

    <div class="m-t-20px"></div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()
const { t } = useI18n()

const user = ref<ApiUser>()

function go(path: string) {
  router.push(path)
}

function trySelf() {
  if (user.value && user.value.pickUpName) {
    go('/agentSelf?userNo=' + user.value.agentNumber)
  } else {
    showDialog({ message: t('agent.shop') })
  }
}

function cs() {
  location.href = 'https://t.me/Teawoo_uz_support'
}

onMounted(() => {
  apis.api.userAgentInfo().then(d => {
    user.value = d
  })
})
</script>

<style lang="scss" scoped>
.body {
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background-color: #f6f6f6;
  box-sizing: border-box;
  padding: 14px;
  font-size: 1.4rem;
}

.bg {
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.flag {
  color: #fff;
  background-color: #3aa1a2;
  padding: 0 4px;
  line-height: 18px;
  height: 18px;
  border-top-left-radius: 8px;
  margin-right: 8px;
}
.app {
  width: 60px;
  height: 60px;
}
</style>
